<template>
  <div class="echartsBox">
    <div id="treemapEcharts" class="allWidthHeight" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { convertData } from '@/utils/function'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      timeInterval: () => {}
    }
  },
  watch: {},
  async mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },
    /* echarts */
    setTreemapEcharts(data) {
      const list = data.children
      const treemapData = convertData(list)
      console.log(treemapData)
      const option = {
        grid: {
          top: '5%',
          left: '18%',
          right: '5%',
          bottom: '10%'
        },
        series: [
          {
            type: 'treemap',
            breadcrumb: {
              show: false
            },
            label: {
              show: true,
              formatter: '{b}'
              // formatter: function (params) {
              //   console.log(params)
              // }
            },
            itemStyle: {
              borderWidth: 0.5,
              borderColor: 'rgba(255,255,255,.5)'
            },
            data: treemapData,
            renderItem: function (params, api) {
              console.log(params, api)
              // 获取当前数据项
              var data = api.value(0)
              // 定义一些常量
              var cellSize = api.cellSize
              var value = data.value
              var backgroundColor
              var borderColor = '#fff'
              var borderWidth = 1

              // 根据值为 0 还是非 0 设置不同的样式
              if (value === 0) {
                backgroundColor = '#eee' // 灰色背景表示值为 0
              } else {
                backgroundColor = api.visual('color') // 使用视觉映射颜色
              }

              // 创建 graphic 元素
              return {
                type: 'rect',
                shape: {
                  x: api.x,
                  y: api.y,
                  width: cellSize[0],
                  height: cellSize[1]
                },
                style: {
                  fill: backgroundColor,
                  stroke: borderColor,
                  lineWidth: borderWidth
                }
              }
            }
            // renderAllLevels: true,
            // visibleMin: 0
          }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('treemapEcharts'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.echartsBox {
  width: 100%;
  padding: 0 15px;
  height: calc(100% - 40px);
}
</style>
